<template>
  <div>
    <BasicForm @register="registerForm">
      <template #phone="{ model, field }">
        <span>{{ model[field] }}</span>
      </template>

      <template #verifyCode="{ model, field }">
        <a-row :gutter="8">
          <a-col :sm="14" :md="14" :lg="14" :xl="14">
            <a-input v-model:value="model[field]" class="input-verify-code" placeholder="请输入验证码" />
          </a-col>
          <a-col :sm="8" :md="8" :lg="8" :xl="8">
            <a-button type="primary" style="width: 100%" @click="handleSend" :disabled="disabled">{{ butName }}</a-button>
          </a-col>
        </a-row>
      </template>
    </BasicForm>
    <ManMachineVerifyModal @register="registerManMachineVerifyModal" @submit="handleManMachineVerifySuccess" />
  </div>
</template>
<script lang="ts">
  import { ref, onMounted, defineComponent, watch, nextTick, PropType } from "vue"
  import { BasicForm, useForm } from "/@/components/Form/index"
  import { phoneFormSchema } from "./verify.data"
  import { useUserStore } from "/@/store/modules/user"
  import { TaskCode, BizType } from "/@/api/sys/model/msgPushModel"
  import { useSendCaptchaMsg } from "./useSendCaptchaMsg"
  import ManMachineVerifyModal from "./ManMachineVerifyModal.vue"
  // 声明Emits
  export default defineComponent({
    name: "SmsVerify",
    components: {
      BasicForm,
      ManMachineVerifyModal,
    },
    props: {
      bizType: { require: true, type: String },
      verifyType: { require: true, type: String },
      phone: { require: false, type: Object },
      // 接口参数
      apiParams: { require: false, type: Object },
      // 发送验证码接口
      api: { require: false, type: Function },
    },
    emits: ["register"],
    setup(props, { emit }) {
      const userStore = useUserStore()
      //表单配置
      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
        schemas: phoneFormSchema,
        labelWidth: "90px",
        showActionButtonGroup: false,
      })

      onMounted(async () => {
        if (props.phone?.encryptData && props.apiParams) {
          props.apiParams.encryptData = props.phone?.encryptData
        }
        await resetFields()
        await setFieldsValue({ phone: props.phone?.value || userStore.getUserInfo.phone })
      })

      watch(
        () => props.phone,
        () => {
          nextTick(async () => {
            if (props.phone?.encryptData && props.apiParams) {
              props.apiParams.encryptData = props.phone?.encryptData
            }
            await setFieldsValue({ phone: props.phone?.value || userStore.getUserInfo.phone })
          })
        },
        {
          immediate: true,
        }
      )

      const { handleSend, butName, disabled, verifyInfo, registerManMachineVerifyModal, handleManMachineVerifySuccess } = useSendCaptchaMsg({
        taskCode: TaskCode.VERIFY_SMS,
        bizType: props.bizType,
        apiParams: ref(props.apiParams),
        api: props.api,
      })

      const getData = async () => {
        const values = await validate()
        return {
          ...values,
          ...verifyInfo,
        }
      }

      return {
        handleSend,
        registerForm,
        registerManMachineVerifyModal,
        handleManMachineVerifySuccess,
        butName,
        disabled,
        getData,
        ...props,
      }
    },
  })
</script>

<style></style>
